<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>健康数据</title>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css">
	<script src="resources/common/jquery/jquery-3.2.1.min.js"></script>
	<script src="resources/bootstrap/js/bootstrap.min.js"></script>
	<script src="resources/toastr/js/toastr.js"></script>
	<link rel="stylesheet" href="resources/toastr/css/toastr.css">
	<script src="resources/common/js/echarts.js"></script>
	<script src="resources/common/js/echarts-data.js"></script>
	<link rel="stylesheet" href="resources/bootstrap-date/bootstrap-datepicker3.min.css">
	<script src="resources/bootstrap-date/bootstrap-datepicker.min.js"></script>
	<script src="resources/bootstrap-date/bootstrap-datepicker.zh-CN.min.js"></script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <script type="text/javascript">
  	// 基于准备好的dom，初始化echarts实例
    var myChart = null;
    
 	$(document).ready(function(){ 
 	//	$("[data-toggle='tooltip']").tooltip();//提示信息
 		$('.selectData').datepicker({
	        minView: "day", //  选择时间时，最小可以选择到那层；默认是‘hour’也可用0表示
	        language: 'zh-CN', // 语言
	        autoclose: true, //  true:选择时间后窗口自动关闭
	        format: 'yyyy-mm-dd', // 文本框时间格式，设置为0,最后时间格式为2017-03-23 17:00:00
	        todayBtn: true, // 如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。
	        endDate:new Date()//时间最多选择到当前时间
	    });
 		$("#cond").blur(
			function(){
				var cond = $("#cond").val()
				if(cond == null || cond == ''){
					return false;
				}
				var paramjson = {
					cond:cond,
					time1:$("#sel-time").val(),
					time2:$("#sel-time2").val()
				}
				$.ajax({
        		url:"receive/searchre.do",
        		type:'post',
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		traditional:true,//防止转义--组合对象默认会被转义无法被springmvc转换
        		data:JSON.stringify(paramjson),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		dataType:'JSON',
        		cache: false,  //禁用缓存
        		success:function(data){
        			if(data.code == 200){
        				var records = data.data.records
        				if(records==null || records.length <=0){
        					return false;
        				}
        				var sel = $("#sel-user")
        				$(sel).empty()
        				for(i=0;i<records.length;i++){
        					var str = records[i].name+"("+records[i].idcard+")"
        					sel.append("<option value='"+records[i].id+"'>"+str+"</option>");
        				}
        			}
        		},
        		error:function(){
        			
        		} 
        	});
			} 		
 		);
	    $("#search").click(function(){
	    	var reid = $("#sel-user").val() 
	    	if(reid==null || reid==''){
	    		return false;
	    	}
	    	var paramjson = {
	    		reid:reid
	    	}
	    	$.ajax({
        		url:"receive/searchreceive.do",
        		type:"post",
        		async:true,//异步执行
        		timeout:5000,//超时时间5s
        		traditional:true,//防止转义--组合对象默认会被转义无法被springmvc转换
        		data:JSON.stringify(paramjson),//参数
        		contentType:'application/json;charset=utf-8',//参数类型
        		dataType:'JSON',
        		cache: false,  //禁用缓存
        		success:function(data){
        			if(data.code == 200){
        				var receives = data.data.receives
        				if(receives!=null && receives.length>0){
        					var str = "";
        					for(i=0;i<receives.length;i++){
        						var re = receives[i]
        						str += "<tr>";
	        						str += "<td>";
	        							str += re.equipmentName;
	        						str += "</td>";
	        						str += "<td>";
	        							str += re.especification;
	        						str += "</td>";
	        						str += "<td>";
	        							str += re.manufacturerName;
	        						str += "</td>";
	        						str += "<td>";
	        							str += "<button type='button' onclick='tb("+re.id+",this)' class='btn btn-default'>查询</button>"+
	        							"<button type='button' onclick='cancletb("+re.id+")' class='btn btn-default'>取消</button>"
	        						str += "</td>";
        						str += "</tr>";
        					}
        					$("#tab-cont").html(str)
        				}
        			}
        		},
        		error:function(){
        			
        		} 
        	});
	    });
	//    $('#sel-user').searchableSelect();
 	});
 	function cancletb(vid){
 		$("."+vid).remove()
 		
 	}
 	function tb(vid,t){
 		//先清除之前的图表
 		var datastr = $(".data")
	    for(var d=0;d<datastr.length;d++){
	    	$(datastr[d]).remove()
	    } 
	    var row = $(t).parent().parent()
	    if($("."+vid).html()==undefined){
 			$(row).after('<tr class="data '+vid+'"><td colspan="4" class="td'+vid+'"><div class="col-md-12 center-block" style="width: 100%;height:400px;" id="tb-cont'+vid+'"></div></td></tr>')
 		}
 		//后台查询设备监测数据
 		var paramjson = {
 			reid:vid,
			pid:$("#sel-user").val(),//用户ID
            time1:$("#sel-time").val(),
 			time2:$("#sel-time2").val()
 		}
 		
 		$.ajax({
       		url:"receive/searchmonitor.do",
       		type:'post',
       		async:true,//异步执行
       		timeout:5000,//超时时间5s
       		traditional:true,//防止转义--组合对象默认会被转义无法被springmvc转换
       		data:JSON.stringify(paramjson),//参数
       		contentType:'application/json;charset=utf-8',//参数类型
       		dataType:'JSON',
       		cache: false,  //禁用缓存
       		success:function(data){
       			if(data.code == 200){
       				if (myChart != null && myChart != "" && myChart != undefined) {  
				        myChart.dispose();
				    }
			 		myChart = echarts.init(document.getElementById('tb-cont'+vid));
			 		if(data.data.opt == null){
			 			if (myChart != null && myChart != "" && myChart != undefined) {  
					        myChart.clear()
					    }
					    $("."+vid).remove()
					    alert("没有可显示的数据")
			 		}else{
			 			var opt = getoption(data.data.opt)
	       				// 使用刚指定的配置项和数据显示图表。
	       				myChart.setOption(opt);
			 		}
       				
       			}else{
       					if (myChart != null && myChart != "" && myChart != undefined) {  
					        myChart.clear()
					        cancletb(vid)
					    }
       				}
       		},
       		error:function(){
       			if (myChart != null && myChart != "" && myChart != undefined) {  
			        myChart.clear()
			    }
       		} 
       	});
       	}
  </script>
  <body>
  <div class="col-md-12" style="border:1px;">
   	<form class="form-inline" role="form" action="" method="post">
		  <div class="form-group">
		    <label for="cond">姓名/身份证号</label>
		    <input type="text" class="form-control" id="cond" placeholder="">
		  </div>
		  <div class="form-group">
		    <label class="sr-only" for="sel-user">Email</label>
		    <select class="form-control" id="sel-user">
		    	<option value="">请选择领用人</option>
		    </select>
		  </div>
		  
		  <button type="button" id="search" class="btn btn-default">查询</button>
		  
		  <div class="form-group">
		    <label for="sel-time">监测时间</label>
		    <input type='text' class='form-control selectData' id='sel-time' name='date'>-<input type='text' class='form-control selectData' id='sel-time2' name='date'>
		  </div>
	</form>
	</div>
	<hr>
	<div class="col-md-12 center-block" >
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>设备名称</th>
					<th>型号</th>
					<th>生产厂商</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tab-cont">
				<c:forEach var="d" items="${receives}">
					<tr>
						<td>${d.equipmentName}</td>
						<td>${d.equipment.specification}</td>
						<td>${d.manufacturerName}</td>
						<td><button type='button' onclick='tb(${d.id},this)' class='btn btn-default'>查询</button>
							<button type='button' onclick='cancletb(${d.id})' class='btn btn-default'>取消</button>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	<div class="col-md-12 center-block" style="width: 100%;height:400px;" id="tb-cont">
		
	</div>
  </body>
</html>
